<template>
  <div v-if="true">
    <!-- <div v-if="info && info.loginName"> -->
    <a-dropdown placement="bottomRight">
      <a
        class="ant-dropdown-link"
        @click="e => e.preventDefault()"
      >
        {{ Userinfo.name }}
        <a-icon type="down" />
      </a>
      <a-menu slot="overlay">
        <a-menu-item>
          <a
            href="javascript:;"
            @click="managerInfo"
          >
            <a-icon type="user" />
            信息维护
          </a>
        </a-menu-item>
        <a-menu-item>
          <a
            href="javascript:;"
            @click="passwordVisible = true"
          >
            <a-icon type="unlock" />
            修改密码
          </a>
        </a-menu-item>
        <a-menu-item>
          <a
            href="javascript:;"
            @click="handleLogout"
          >
            <a-icon type="logout" />
            退出登录
          </a>
        </a-menu-item>
      </a-menu>
    </a-dropdown>
    <a-modal
      :width="680"
      title="信息维护"
      :visible="contactVisible"
      @ok="infoSubmit"
      @cancel="contactVisible=false"
    >
      <template>
        <a-form
          :form="form"
          :label-col="{ span: 5 }"
          :wrapper-col="{ span: 18 }"
        >
          <a-form-item label="工号(账号)">
            <a-input
              disabled
              v-decorator="['account']"
            />
          </a-form-item>
          <a-form-item label="姓名">
            <a-input
              v-decorator="['name', { rules: [{  message: '请输入姓名' }] }]"
              placeholder="请输入姓名"
            />
          </a-form-item>
          <a-form-item label="手机号码">
            <a-input
              v-decorator="['phone', { rules: [{ message: '请输入手机号' },{ validator: ''}] }]"
              placeholder="请输入手机号"
            />
          </a-form-item>
        </a-form>
      </template>
    </a-modal>
    <a-modal
      :width="680"
      title="修改密码"
      :visible="passwordVisible"
      @ok="passwordSubmit"
      @cancel="passwordVisible=false"
    >
      <template>
        <a-form
          :form="passwordForm"
          :label-col="{ span: 5 }"
          :wrapper-col="{ span: 18 }"
        >
          <a-form-item label="新密码">
            <a-input-password
              v-decorator="['password',{ rules: [{ required:true, message: '请输入确认密码' }] }]"
            />
          </a-form-item>
          <a-form-item label="确认密码">
            <a-input-password
              v-decorator="['password2', { rules: [{required:true, message: '请输入确认密码' },{ validator: this.handlePasswordCheck }] }]"
              placeholder="请输入确认密码"
            />
          </a-form-item>
        </a-form>
      </template>
    </a-modal>
  </div>
  <span v-else>
    <a-spin
      size="small"
      :style="{ marginLeft: 8, marginRight: 8 }"
    />
  </span>
</template>

<script>
import { Modal } from 'ant-design-vue';
import { mapState } from 'vuex';
import storage from 'store';
import { ACCESS_TOKEN } from '@/store/mutation-types';

export default {
  name: 'AvatarDropdown',
  data() {
    return {
      contactVisible: false,
      form: this.$form.createForm(this),
      passwordVisible: false,
      passwordForm: this.$form.createForm(this),

    };
  },
  computed: {
    ...mapState({ Userinfo: (state) => state.user.Userinfo }),
  },
  mounted() {

  },
  methods: {
    handlePasswordCheck(rule, value, callback) {
      const password = this.passwordForm.getFieldValue('password');
      if (value === undefined) {
        callback(new Error('请输入密码'));
      }
      if (value && password && value.trim() !== password.trim()) {
        callback(new Error('两次密码不一致'));
      }
      callback();
    },
    // 修改信息
    infoSubmit() {
      this.form.validateFields((err, values) => {
        if (!err) {
          console.info('success', values);
          this.$axios({
            url: 'manager/info',
            method: 'put',
            data: {
              name: values.name,
              phone: values.phone,
            },
          }).then((res) => {
            this.contactVisible = false;
            this.Userinfo.name = values.name;
            this.Userinfo.phone = values.phone;
          });
        }
      });
    },
    // 修改密码
    passwordSubmit() {
      this.passwordForm.validateFields((err, values) => {
        if (!err) {
          this.$axios({
            url: 'manager/info/password',
            method: 'put',
            data: {
              password: values.password,
            },
          }).then((res) => {
            this.passwordVisible = false;
            this.$store.dispatch('user/Logout').then(() => {
              this.$router.push({ name: 'login' });
            });
          });
        }
      });
    },
    // 信息维护
    managerInfo() {
      this.contactVisible = true;
      const data = {
        account: this.Userinfo.account,
        name: this.Userinfo.name,
        phone: this.Userinfo.phone,
      };
      this.$nextTick(() => {
        this.form.setFieldsValue(data);
      });
    },

    handleLogout() {
      Modal.confirm({
        title: '您确定退出么？',
        onOk: () => this.$store.dispatch('user/Logout').then(() => {
          this.$router.push({ name: 'login' });
        }),
        onCancel() { },
      });
    },
  },
};
</script>

<style lang="less" scoped>
.ant-pro-drop-down {
  /deep/ .action {
    margin-right: 8px;
  }
  /deep/ .ant-dropdown-menu-item {
    min-width: 160px;
  }
}
</style>
